<template>
  <view class="activation-page">
    <view class="content">
      <image class="logo" src="/static/images/logo.jpeg" mode="aspectFit"/>
      <text class="title">库存管理系统</text>
      <text class="subtitle">请输入激活码以继续使用</text>
      
      <view class="input-box">
        <input 
          v-model="activationCode"
          class="activation-input"
          placeholder="请输入激活码"
          @confirm="handleActivation"
        />
        <button 
          class="activate-btn"
          :disabled="!activationCode"
          @click="handleActivation"
        >
          激活
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { userApi } from '@/api/user'

const activationCode = ref('')

const handleActivation = async () => {
  if (!activationCode.value) {
    uni.showToast({
      title: '请输入激活码',
      icon: 'none'
    })
    return
  }

  try {
    await userApi.activate(activationCode.value)
    uni.setStorageSync('isActivated', true)
    uni.reLaunch({
      url: '/pages/index/index'
    })
  } catch (error) {
    uni.showToast({
      title: '激活码无效',
      icon: 'error'
    })
  }
}
</script>

<style>
.activation-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  padding: 32px;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.logo {
  width: 120px;
  height: 120px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 24px;
}

.input-box {
  width: 100%;
  display: flex;
  gap: 12px;
}

.activation-input {
  flex: 1;
  height: 44px;
  background: #fff;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
}

.activate-btn {
  width: auto;
  height: 44px;
  background: #1890ff;
  color: white;
  border-radius: 8px;
  padding: 0 24px;
}

.activate-btn[disabled] {
  background: #ccc;
}
</style> 